<template>
  <view>
    <view class="subtitle ss-m-b-10" v-if="state.couponInfo.length>0">可使用优惠券</view>
    <view class="ss-flex ss-flex-wrap" :style="{gap: '8px'}">
      <view v-for="item in state.couponInfo" :key="item.id" class="coupon-item">
        <s-coupon-list-pc :data="item">
          <template #default>
            <button
              class="ss-reset-button card-btn ss-flex ss-row-center ss-col-center"
              :class="
                item.get_status != 'can_get' && item.get_status != 'can_use' ? 'boder-btn' : ''
              "
              @click.stop="getBuy(item.id)"
              :disabled="item.get_status != 'can_get' && item.get_status != 'can_use'"
            >
              {{ item.get_status_text }}
            </button>
          </template>
        </s-coupon-list-pc>
      </view>
    </view>
  </view>
</template>
<script setup>
  import { computed, reactive } from 'vue';
  const props = defineProps({
    modelValue: {
      type: Object,
      default() {},
    },
    show: {
      type: Boolean,
      default: false,
    },
  });
  const emits = defineEmits(['get', 'close']);
  const state = reactive({
    couponInfo: computed(() => props.modelValue),
    currentValue: -1,
    couponId: '',
  });
  const getBuy = (id) => {
    emits('get', id);
  };
  //立即领取
</script>
<style lang="scss" scoped>
  .subtitle {
    font-size: 28rpx;
    font-weight: 500;
    color: $dark-9;
    flex-shrink: 0;
  }
  // 优惠券按钮
  .card-btn {
    padding: 0 16rpx;
    height: 32rpx;
    border-radius: 15rpx;
    background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
    color: #ffffff;
    font-size: 18rpx;
  }
  .boder-btn {
    background: linear-gradient(90deg, var(--ui-BG-Main-opacity-4), var(--ui-BG-Main-light));
    color: #fff !important;
  }
  .coupon-item {
    background: #f6f6f6;
    border-radius: 10px;
    width: 180px;
  }
</style>
